<template>
  <t-dialog
    title="项目信息"
    top="15vh"
    width="550px"
    :visible="visible"
    @onClickFooterButton="onClickFooterButton"
    :button="[{ type: 'primary', name: '知道了' }]"
  >
    <div class="w-full h-full flex flex-col text-sm space-y-4">
      <div class="">
        <span>项目名称：</span>
        <span>{{ project.name }}</span>
      </div>
      <div v-if="project.writecode" class="space-y-2">
        <div>手写码KEY：</div>
        <el-descriptions
          border
          direction="vertical"
          :column="5"
          :labelStyle="{ 'text-align': 'center' }"
          :contentStyle="{ 'text-align': 'center' }"
        >
          <el-descriptions-item label="SID">{{
            project.writecode.sid
          }}</el-descriptions-item>
          <el-descriptions-item label="OID">{{
            project.writecode.oid
          }}</el-descriptions-item>
          <el-descriptions-item label="BID">{{
            project.writecode.bid
          }}</el-descriptions-item>
          <el-descriptions-item label="PageID"
            >{{ project.writecode.minPid }}-{{
              project.writecode.maxPid
            }}</el-descriptions-item
          >
          <el-descriptions-item label="有效期">{{
            project.writecode.expiryDate
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-if="project.readcode" class="space-y-2">
        <div>点读码KEY：</div>
        <el-descriptions
          border
          direction="vertical"
          :column="6"
          :labelStyle="{ 'text-align': 'center' }"
          :contentStyle="{ 'text-align': 'center' }"
        >
          <el-descriptions-item label="SA">{{
            project.readcode.sa
          }}</el-descriptions-item>
          <el-descriptions-item label="SB">{{
            project.readcode.sb
          }}</el-descriptions-item>
          <el-descriptions-item label="SC">{{
            project.readcode.sc
          }}</el-descriptions-item>
          <el-descriptions-item label="SD">{{
            project.readcode.sd
          }}</el-descriptions-item>
          <el-descriptions-item label="Index"
            >{{ project.readcode.minIndex }}-{{
              project.readcode.maxIndex
            }}</el-descriptions-item
          >
          <el-descriptions-item label="有效期">{{
            project.readcode.expiryDate
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </t-dialog>
</template>

<script>
import TDialog from "@/components/TDialog.vue";
export default {
  components: { TDialog },
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    project() {
      return this.$attrs.project;
    },
  },
  methods: {
    open() {
      this.visible = true;
    },
    onClickFooterButton(name) {
      switch (name) {
        case "知道了":
          this.visible = false;
          break;

        default:
          break;
      }
    },
  },
};
</script>
